<!--
 * @Author: your name
 * @Date: 2022-01-11 17:55:22
 * @LastEditTime: 2022-01-11 18:36:14
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \campus-market-frontend-master\src\pages\admin.vue
-->
<route lang="yaml">
# 定义路由 meta 信息，参考 router.ts 中的注释
meta:
  requiresAuth: true
  isAdmin: true
</route>

<template>
  <div class="roles">
    <pre>{{ roles }}</pre>
    <pre>{{ errors }}</pre>
  </div>
</template>

<script setup lang="ts">
/**
 * 使用了 Vue 3 的 Composition API，注意上方的 `<script setup>` 与之前不同。
 * 同时也兼容 Vue 2 的 Options API 语法（见文件下方）。
 *
 * @see https://v3.cn.vuejs.org/guide/composition-api-introduction.html
 */
import { onMounted, ref } from 'vue'
import { useErrors } from '../composable/useErrors'
import instance from '../services'

// 相当于 Vue 2 的 data: { roles: null }
const roles = ref()
const { errors, errorHandler } = useErrors()

// 组件挂载后执行，相当于 Vue 2 的 mounted 生命周期
onMounted(async () => {
  try {
    // 请求后端 API 接口并获取响应
    const response = await instance.get('/auth/admin')
    // 注意，修改 ref 响应式变量的值时需要修改其 value 属性
    roles.value = response.data
  } catch (err) {
    // 调用通用错误处理方法处理错误，错误信息保存在 errors 响应式变量中
    errorHandler(err)
  }
})
</script>

<!-- 等价的 Vue 2.x 写法 -->
<!-- <script lang="ts">
import { defineComponent } from 'vue'
import instance from '../services'

interface Data {
  roles: string[]
  errors: string
}

export default defineComponent({
  data(): Data {
    return {
      roles: [],
      errors: ''
    }
  },
  async mounted() {
    try {
      this.roles = (await instance.get('/auth/admin')).data
    } catch (err) {
      this.errors = (err as Error).message
    }
  }
})
</script> -->
